<template>
<!-- Hero Section -->
<section id="hero" class="hero section dark-background">
    <img src="../assets/img/hero-bg-2.jpg" alt="" class="hero-bg">

    <div class="container">
        <div class="row gy-4 justify-content-between">
            <div class="col-lg-4 order-lg-last hero-img" data-aos="zoom-out" data-aos-delay="100">
                <img src="../assets/img/fitbit.jpg" class="img-fluid animated" alt="">
            </div>

            <div class="col-lg-6  d-flex flex-column justify-content-center" data-aos="fade-in">
                <h1>Fitbit Inspire 3 Health <span>Bluetooth</span></h1>
                <p>We have ready operation video and manual for you</p>
                <div class="d-flex">
                    <RouterLink to="/manual" class="btn-get-started">Get Operation Manual</RouterLink>
                    <RouterLink to="/video" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Operation Video</span></RouterLink>
                </div>
            </div>

        </div>
    </div>

    <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
        <defs>
            <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
        </defs>
        <g class="wave1">
            <use xlink:href="#wave-path" x="50" y="3"></use>
        </g>
        <g class="wave2">
            <use xlink:href="#wave-path" x="50" y="0"></use>
        </g>
        <g class="wave3">
            <use xlink:href="#wave-path" x="50" y="9"></use>
        </g>
    </svg>

</section><!-- /Hero Section -->

<!-- About Section -->
<section id="about" class="about section">

    <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="row align-items-xl-center gy-5">
            <div class="container section-title aos-init aos-animate" data-aos="fade-up">
                <h2>Help~</h2>
                <div><span>Post-Purchase</span> <span class="description-title">Services</span></div>
            </div>
            <div class="col-xl-5 content">
                <h2>Do you have any question about after sales?</h2>
                <p>You can feedback any questions follow this</p>
                <RouterLink to="/feedback" class="read-more"><span>Feedback</span><i class="bi bi-arrow-right"></i></RouterLink>
            </div>

            <div class="col-xl-7">
                <div class="row gy-4 icon-boxes">

                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <RouterLink to="/manual">
                            <div class="icon-box">
                                <i class="bi bi-file-pdf-fill"></i>
                                <h3>Electronic Manual</h3>
                                <p>It provides information on how to use, maintain, or repair a product or system. </p>
                            </div>
                        </RouterLink>
                    </div> <!-- End Icon Box -->

                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="300">
                        <RouterLink to="/video">
                            <div class="icon-box">
                                <i class="bi bi-camera-video-fill"></i>
                                <h3>Operation Video</h3>
                                <p>Clearly showing each part of the process.</p>
                            </div>
                        </RouterLink>
                    </div> <!-- End Icon Box -->

                    <div class="col-md-12" data-aos="fade-up" data-aos-delay="300">
                        <RouterLink to="/survey">
                            <div class="icon-box">
                                <i class="bi bi-card-checklist"></i>
                                <h3>Survey</h3>
                                <p>Your advice about this product.</p>
                            </div>
                        </RouterLink>
                    </div> <!-- End Icon Box -->

                </div>
            </div>

        </div>
    </div>

</section><!-- /About Section -->
</template>

<script setup>
import {
    useRoute
} from "vue-router"
import {
    ref,
    onMounted
} from 'vue'

const route = useRoute();
onMounted(() => {
    console.log(route.query);
})
</script>
<style lang="css">
#about a .icon-box p{
    color: var(--default-color);
}

#about a:hover .icon-box p{
    color: var(--accent-color);
}
</style>